
import React, {Component} from 'react';

import'./default_plugins';
import './EditorByRedactor.css';
import {WordPaster} from '../../../public/static/WordPaster/js/w'


export default class EditorByRedactor extends Component {

    constructor(props) {
        super(props);
        this.id = Math.random();
    }
    next(info) {
        // console.log('next', info)
    }
    error(err) {
        // console.log('err', err)
    }
  
    // wordpasterInit(){
    //     WordPaster.getInstance({
    //         // 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
    //         PostUrl: 'http://localhost:8891/upload.aspx',
    //         // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
    //         ImageUrl: 'http://localhost:8891{url}',
    //         // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
    //         FileFieldName: 'file'
    //         // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
    //       })
    // }

    componentDidMount() {
        let _this = this;
        let { mode } = this.props;
        // simple、normal的默认按钮及插件
        let redactorType = {
            simple: {
                buttons: [
                    'html',
                    'format',
                    'bold',
                    'italic',
                    'deleted',
                    'lists',
                    'horizontalrule',
                    'link',
                    'underline',
                ],
                plugins: ['alignment', 'fontsize', 'fontcolor', 'table', 'image', 'upload'],
            },
            normal: {
                buttons: [
                    // 'format',
                    'bold',
                    'italic',
                    'deleted',
                    'horizontalrule',
                    'link',
                    'underline',
                    'insertMath'
                ],
                plugins: [
                    'alignment',
                    'fontsize',
                    'fontcolor',
                    'table',
                    'image',
                    // 'file_custom',
                    'upload',
                    'insertLine4',
                    'insertLine8',
                    'wordpaster',
                    'wordtoimg',
                    'netimg',
                    'wordimport',
                    'excelimport',
                    'pptimport',
                    'pdfimport',
                    'insertMath'
                ],
            }
        };

        let buttons = redactorType[mode].buttons;
        let plugins = redactorType[mode].plugins;

        // 初始化redactor
        $R(`#content${this.props.id}`, {
            imageUpload: function(data, files, e, upload) {
                return new Promise(function(resolve, reject) {
                    let url = '';
                    const complete = function(res) {
                        url = VIDEO_CUSTOM_URL + res.hash;
                        let urlObj = {
                            id: '#redactor-modal-file-upload',
                            type: 'image/png',
                            url: url,
                        };
                        resolve(urlObj);
                    };
                    api.getUploadToken().then(data => {
                        const key = undefined;
                        const putExtra = {
                            fname: '',
                            params: {},
                        };
                        const config = {
                            useCdnDomain: true,
                        };
                        let observable = qiniu.upload(
                            files[0],
                            key,
                            data.uptoken,
                            putExtra,
                            config
                        );
                        const subscription = observable.subscribe(
                            _this.next,
                            _this.error,
                            complete
                        );
                    });
                })
                    .then(function(response) {
                        // success
                        upload.complete(response);
                    })
                    .catch(function(response) {
                        // fail
                        upload.complete(response);
                    });
            },
            fileUpload: mode === 'file_custom' ? VIDEO_CUSTOM_URL : null,
            lang: 'zh_cn',
            imagePosition: true,
            imageResizable: true,
            callbacks: {
                upload: {
                    beforeSend: function(xhr) {
                        // send headers for example
                        xhr.setRequestHeader('X-CSRF-Token', 'your-token-value');
                    },
                },
                changed: function(html) {
                    if (html.indexOf('<p>') !== -1) {
                        let result = html.replace(/\<p\>/g, '<div>').replace(/\<\/p\>/g, '</div>');
                        _this.props.editorChange(result);
                    } else {
                        _this.props.editorChange(html);
                    }
                },
                pasting: function(html) {
                    return html.trim();
                },
                modal: {
                    closed: function(modal, form) {
                        $(document).ready(function() {
                            $('#redactor-modal').remove();
                        });
                    },
                },
            },
            buttons: this.props.buttons || buttons,
            plugins: this.props.plugins || plugins,
        });
        // this.wordpasterInit();

        
        //初始化
        WordPaster.getInstance({
            //上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
            PostUrl : 'http://localhost:8891/upload.aspx',
            //为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
            ImageUrl : 'http://localhost:8891{url}',
            //设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
            FileFieldName: 'file',
            //提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
            ImageMatch: ''  
        })
    }

    componentWillUnmount() {
        super.componentWillUnmount();
        $('#redactor-modal').remove();
        $('#redactor-image-resizer').remove();
    }
    render() {
        let { id, value, style } = this.props;
        return (
            <div className="wEditorByRedactor" style={style}>
                <textarea id={`content${id}`} defaultValue={value} />
            </div>
        );
    }
}
